<template>
  <!-- 提货单 -->
  <div class="bill_styl">
    <div class="bill_search">
      <div class="title_styl">
        <div class="title_left">
          <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
          <div class="title_name">我的提货单</div>
        </div>
      </div>
      <div class="search_content">
        <div class="bill_status">
          <div class="status_title">提货单状态</div>
          <div
            class="status_name"
            @click="MX_chooseDataFun('status', item)"
            :class="[MX_searchparams.status == item.value ? 'status_nameCopy' : '']"
            v-for="(item, index) in tabsStatus"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="bill_status time_styl">
          <div class="status_title">日期选择</div>
          <div
            class="status_name"
            @click="MX_chooseDataFun('time', item)"
            :class="[MX_searchparams.time == item.value ? 'status_nameCopy' : '']"
            v-for="(item, index) in timeInterval"
            :key="index"
          >
            {{ item.value }}
          </div>
          <div class="time_choose">
            <div class="time_title">范围</div>
            <DatePicker
              v-model="MX_timeParams.startTime"
              @on-change="MX_chooseTimeFun('startTime', $event)"
              type="datetime"
              placeholder="开始日期"
              size="small"
              style="width: 120px"
              format="yyyy-MM-dd"
            ></DatePicker>
            &nbsp;-&nbsp;
            <DatePicker
              v-model="MX_timeParams.endTime"
              @on-change="MX_chooseTimeFun('endTime', $event)"
              type="datetime"
              placeholder="结束日期"
              size="small"
              style="width: 120px"
              format="yyyy-MM-dd"
            ></DatePicker>
            <div class="btn_search" @click="MX_handleSubmit">搜索</div>
            <div class="btn_reset" @click="MX_handleReset">重置</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bill_content">
      <div class="bill_item1" v-if="MX_DataList.length == 0">
        <QdNoData ref="QdNoData" titleContent="暂无提货单信息 ~"></QdNoData>
      </div>
      <Spin fix v-if="MX_tableLoading"></Spin>
      <div class="bill_item" v-for="(item, index) in MX_DataList" :key="index">
        <div class="bill_title">
          <div class="btitle_left">
            <Icons font="#icon-wddd-bh" class="icon-wddd-bh" fontSize="16px"></Icons>
            <div class="title_name">提货单编码</div>
            <div class="code_styl">{{ item.code }}</div>
          </div>
          <div class="title_right" :style="{ color: statusName[item.status].color }">{{ statusName[item.status].name }}</div>
        </div>
        <div class="bill_info">
          <div class="info_content">
            <div class="info_left first_styl">
              <div class="info_item">
                <div class="info_title">规格名称</div>
                <div class="product_name">{{ item.productAttrName }}</div>
              </div>
              <div class="info_item">
                <div class="info_title">类型</div>
                <div class="type_styl">{{ billType[item.method] }}</div>
              </div>
            </div>
            <div class="info_left small_styl">
              <div class="info_item">
                <div class="info_title">车牌号</div>
                <div class="car_num">{{ item.carNumber }}</div>
              </div>
              <div class="info_item">
                <div class="info_title">司机姓名</div>
                <div class="user_name">{{ item.driverName }}</div>
              </div>
            </div>
            <div class="info_left small_styl">
              <div class="info_item">
                <div class="info_title">预卸量</div>
                <div class="user_name">{{ item.nnum }} 吨</div>
              </div>
              <div class="info_item">
                <div class="info_title">实卸量</div>
                <div class="user_name">{{ item.actNum || 0 }} 吨</div>
              </div>
            </div>
            <div class="info_left id_card">
              <div class="info_item">
                <div class="info_title">司机电话</div>
                <div class="user_name">{{ item.driverPhone }}</div>
              </div>
              <div class="info_item">
                <div class="info_title">身份证号</div>
                <div class="user_name">{{ item.driverCard }}</div>
              </div>
            </div>
            <div class="info_left btn_styl">
              <div class="btn_info" @click="$refs.BillOrderDetail.openFun(item)">详情</div>
              <div v-if="item.status == 1 || item.status == 10" class="btn_edit" @click="$refs.BillOrderEdit.openFun(item)">订单修改</div>
              <div v-if="item.status == 1 || item.status == 10 || item.status == 23" class="btn_del" @click="MX_handleFun({ id: item.id }, '作废', 'API_takeOrderDelete')">
                订单作废
              </div>
            </div>
          </div>
        </div>
        <div class="bill_bottom">
          <div class="bottom_left">
            <div class="bottom_item">
              <Icons font="#icon-wddd-dj" class="margin4" fontSize="14px"></Icons>
              单价: {{ item.nprice }}元
            </div>
            <div class="bottom_item">
              <Icons font="#icon-wddd-sl" class="margin4" fontSize="14px"></Icons>
              皮重: {{ item.piWeight || "暂无~" }}
            </div>
            <div class="bottom_item">
              <Icons font="#icon-wddd-zj" class="margin4" fontSize="14px"></Icons>
              毛重: {{ item.maoWeight || "暂无~" }}
            </div>
          </div>
          <div class="bottom_right">
            <Icons font="#icon-sj" class="icon-sj" fontSize="14px"></Icons>
            创建时间: {{ item.createTime }}
          </div>
        </div>
      </div>
    </div>
    <div class="page_styl">
      <Page v-if="MX_DataList.length != 0" :page-size="MX_pageSize" :total="MX_total" @on-change="MX_changePage" show-total />
    </div>

    <!-- 提货单修改 -->
    <BillOrderEdit ref="BillOrderEdit" @apiSuccess="MX_getData"></BillOrderEdit>
    <!-- 提货单详情 -->
    <BillOrderDetail ref="BillOrderDetail"></BillOrderDetail>
  </div>
</template>

<script>
import dayjs from "dayjs";
import searchListMinxins from "@/mixins/searchListMinxins";
import BillOrderEdit from "./BillOrder-Edit.vue";
import BillOrderDetail from "./BillOrder-Detail.vue";
import QdNoData from "@/components/common/Qd-NoData.vue";

export default {
  components: { BillOrderEdit, BillOrderDetail, QdNoData },
  mixins: [searchListMinxins],
  data() {
    return {
      MX_constSearchData: { customerId: this.$store.getters.store_userInfo.id }, // 动态固定参数
      MX_DataList: [],
      tabsStatus: [
        {
          name: "全部",
          value: "999"
        },
        {
          name: "执行中",
          value: "1"
        },
        {
          name: "已完成",
          value: "2"
        },
        {
          name: "已冻结",
          value: "4"
        },
        {
          name: "已作废",
          value: "3"
        }
      ],
      timeInterval: [
        {
          value: "当天",
          startTime: dayjs().format("YYYY-MM-DD" + " 00:00:01"),
          endTime: dayjs().format("YYYY-MM-DD" + " 23:59:59")
        },
        {
          value: "近三天",
          startTime: dayjs()
            .subtract(3, "day")
            .format("YYYY-MM-DD" + " 00:00:01"),
          endTime: dayjs().format("YYYY-MM-DD" + " 23:59:59")
        },
        {
          value: "近七天",
          startTime: dayjs()
            .subtract(7, "day")
            .format("YYYY-MM-DD" + " 00:00:01"),
          endTime: dayjs().format("YYYY-MM-DD" + " 23:59:59")
        },
        {
          value: "近一月",
          startTime: dayjs()
            .subtract(30, "day")
            .format("YYYY-MM-DD" + " 00:00:01"),
          endTime: dayjs().format("YYYY-MM-DD" + " 23:59:59")
        }
      ],
      billType: {
        1: "[ 合同下单 ]",
        2: "[ 订单下单 ]"
      },
      statusName: {
        0: {
          name: "已保存",
          color: "#0a87f5"
        },
        1: {
          name: "已预约",
          color: "#26d606"
        },
        2: {
          name: "已制卡",
          color: "#AEDFC5"
        },
        3: {
          name: "门禁入",
          color: "#f90"
        },
        4: {
          name: "称皮重",
          color: "#91d5ff"
        },
        5: {
          name: "已发油",
          color: "#d3adf7"
        },
        6: {
          name: "称毛重",
          color: "#91d5ff"
        },
        7: {
          name: "已结算",
          color: "#19be6b"
        },
        8: {
          name: "门禁出",
          color: "#adc6ff"
        },
        9: {
          name: "过期",
          color: "#ed4014"
        },
        10: {
          name: "预约等待",
          color: "#F1A3A3"
        },
        11: {
          name: "已作废",
          color: "#647AA1"
        },
        20: {
          name: "排队",
          color: "#87e8de"
        },
        21: {
          name: "叫号",
          color: "#b7eb8f"
        },
        23: {
          name: "车辆报道",
          color: "#ffbb96"
        }
      },
      addFather: {},
      modalShow: false,
      MX_apis: {
        getlist: "API_takeOrderlist"
      }
    };
  },
  mounted() {
    // 第一次拉列表数据
    this.MX_chooseDataFun("time", this.timeInterval[0]);
  },
  methods: {}
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";

.bill_styl {
  width: 100%;

  .bill_search {
    width: 100%;
    background-color: #ffffff;

    .title_styl {
      .flex-x();
      padding: 8px 0 10px 0;
      background-color: #ffffff;

      .title_left {
        .flex-x(flex-start);

        .title_name {
          margin-left: 17px;
          font-size: 16px;
          font-weight: bold;
        }

        .title_desc {
          margin-left: 20px;
          font-size: 12px;
          color: #999999;
        }
      }
    }

    .search_content {
      padding: 0 12px 12px 12px;
      font-size: 12px;

      .bill_status {
        .flex-x(flex-start);

        .status_title {
          margin-right: 20px;
          color: #9e9e9e;
        }

        .status_name {
          padding: 5px 10px;
          margin-right: 30px;
          cursor: pointer;
        }

        .status_nameCopy {
          padding: 5px 10px;
          border-radius: 4px;
          color: @themeColor;
          background-color: #eaf0fd;
        }

        .time_choose {
          .flex-x(flex-start);
          margin-left: 8px;

          .time_title {
            padding: 5px 10px;
            margin-right: 4px;
            border-radius: 4px;

            color: @themeColor;
            background-color: #eaf0fd;
          }

          .btn_search {
            .flex-x(center);
            width: 70px;
            padding: 4px 10px;
            margin-left: 10px;
            border-radius: 4px;
            color: #ffffff;
            background-color: @themeColor;
            cursor: pointer;
          }

          .btn_reset {
            .flex-x(center);
            width: 70px;
            padding: 4px 10px;
            margin-left: 10px;
            color: #333333;
            border-radius: 4px;
            border: 1px solid #dcdee2;
            background-color: #ffffff;
            cursor: pointer;
          }
        }
      }

      .time_styl {
        margin-top: 10px;
      }
    }
  }

  .bill_content {
    position: relative;
    width: 100%;
    margin-top: 12px;

    .bill_item1 {
      height: 468px;
      background-color: #ffffff;
    }

    .bill_item {
      background-color: #ffffff;
      margin-bottom: 10px;

      .bill_title {
        .flex-x();
        padding: 0 43px 0 16px;
        border: 1px solid #dddde5;
        background-color: #f4f7fc;

        .btitle_left {
          .flex-x(flex-start);

          .title_name {
            margin: 0 10px;
            color: #9e9e9e;
          }

          .code_styl {
            color: @themeColor;
          }
        }

        .title_right {
          padding: 4px 20px;
          margin: 6px 0 4px 0;
          border-radius: 4px;
          font-weight: bold;
        }
      }

      .bill_info {
        border: 1px solid #dddde5;
        border-top: 0;
        border-bottom: 0;

        .info_content {
          .flex-x();
          padding: 20px 12px;

          .info_left {
            width: 20%;
            border-right: 1px solid #f0f0f0;

            .info_item {
              .flex-x(flex-start);
              font-size: 12px;

              .info_title {
                flex-shrink: 0;
                width: 50px;
                margin-right: 30px;
                text-align: left;
                color: #9e9e9e;
              }

              .product_name {
                .one-ellipsis();
              }

              .type_styl {
                text-align: left;
                color: #0649b0;
              }

              .car_num {
                color: #00b351;
              }
            }

            .info_item:first-child {
              margin-bottom: 10px;
            }
          }

          .first_styl {
            width: 25%;
          }

          .small_styl {
            width: 16%;
          }

          .id_card {
            width: 25%;
          }

          .btn_styl {
            width: 15%;
            .flex-y();

            .btn_info {
              //   .solid-btn(80px, 30px, 4px, #f4f7fc, #1652a2);
              .solid-btn(80px, 30px, 4px, #2973e4, #ffffff);
              border: 1px solid #dddde5;
            }

            .btn_edit {
              margin: 5px 0;
              .hollow-btn(80px, 30px, 4px, #ffffff, @themeColor, @themeColor);
            }

            .btn_del {
              .hollow-btn(80px, 30px, 4px, #ffffff, #999999, #999999);
            }
          }

          .info_left:last-child {
            border-right: 0;
          }
        }
      }

      .bill_bottom {
        .flex-x();
        padding: 8px 16px;
        border: 1px solid #dddde5;
        font-size: 12px;

        .bottom_left {
          .flex-x(flex-start);

          .bottom_item {
            .flex-x(flex-start);
            width: 100px;
            margin-right: 30px;

            .margin4 {
              margin-right: 4px;
            }
          }
        }

        .bottom_right {
          color: #9e9e9e;
        }
      }
    }
  }

  .page_styl {
    width: 100%;
    margin-top: 30px;
    text-align: right;
  }
}
</style>
